<!DOCTYPE html>
<html lang="en">
<head>

    <!--新闻发布状态 已通过后进行上下架操作及查看未通过理由-->
    <!--新闻发布状态 已通过后进行上下架操作及查看未通过理由-->
    <!--新闻发布状态 已通过后进行上下架操作及查看未通过理由-->

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <style type="text/css">
        .demo-input-suffix{ margin-left: 20px;
            margin-top: 10px;
        }
        .col-md-8{
            margin-left: 250px;
            border-radius: 10px;
        }
        .a1{
            margin-bottom: 50px ;
            width: 100px;
            height: 39px;
        }
        body{background-image: url("https://img1.baidu.com/it/u=1https://img0.baidu.com/it/u=1077257707,855832289&fm=26&fmt=auto");}
    </style>
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="Info"  class="demo-form-inline">

        <el-input v-model="Info.tname" style="display: inline-block; width: 200px;" placeholder="请输入新闻类型"></el-input>
        <el-input v-model="Info.rname" style="display: inline-block; width: 200px;" placeholder="请输入发布人"></el-input>
        <el-input v-model="Info.time" style="display: inline-block; width: 200px;" placeholder="请输入申请日期"></el-input>
        <el-button class="a1" type="primary" plain icon="el-icon-search"  @click="search()">搜索</el-button>

    </el-form>

    <template>
        <el-table
                :data="newsArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="申请编号"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="title"
                    label="新闻标题"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="time"
                    label="申请日期"
                    width="260">
            </el-table-column>

            <el-table-column
                    prop="newsType.tname"
                    label="新闻类型"
                    width="90">
            </el-table-column>

            <el-table-column
                    prop="newsReporter.rname"
                    label="发布人"
                    width="140">
            </el-table-column>

            <el-table-column
                    prop="auditor"
                    label="审核员"
                    width="160">
            </el-table-column>

            <el-table-column
                    prop="newsState.state"
                    label="状态"
                    width="100">
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">

                    <!--状态的改变决定后续会有什么操作-->

                    <div v-if="scope.row.newsState.state == '已上架'" >
                        <el-button type="danger" size="small" @click="lower(scope.row.id)" >下架</el-button>
                        <el-button type="primary" size="small" @click="see(scope.row.id)" >详情</el-button>
                    </div>

                    <div v-if="scope.row.newsState.state == '已下架'" >
                        <el-button type="success" size="small" @click="upper(scope.row.id)" >上架</el-button>
                        <el-button type="primary" size="small" @click="see(scope.row.id)" >详情</el-button>
                    </div>

                    <div v-if="scope.row.newsState.state == '未通过'" >
                        <el-button type="warning" size="small" @click="bu(scope.row.id)" >原因</el-button>
                        <el-button type="primary" size="small" @click="see(scope.row.id)" >详情</el-button>
                    </div>

                    <div v-if="scope.row.newsState.state =='已通过'" >
                        <el-button type="success" size="small" @click="upper(scope.row.id)" >上架</el-button>
                        <el-button type="primary" size="small" @click="see(scope.row.id)" >详情</el-button>
                    </div>

                </template>

            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            style="margin:  0  auto"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <el-dialog
            title="新闻内容"
            :visible.sync="dialogVisible"
            width="50%"
            :model="cInfo"
            :before-close="handleClose">
        <p v-html="cInfo.content"></p>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>

    <el-dialog
            title="拒绝理由"
            :visible.sync="noDialogVisible"
            width="50%"
            :model="noInfo"
            :before-close="handleClose">
        <p v-html="noInfo.reason"></p>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="noDialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            Info:{},
            cInfo:{},
            noInfo:{},
            newsArr:[],
            totalCount:0,
            handleClose:{},
            dialogVisible:false,
            noDialogVisible:false
        },
        methods:{

            // 查看拒绝理由
            bu(id){
                $.get("/ssm/state/get/" +id,function (backDate) {
                    haha.noInfo = backDate.data;
                    haha.noDialogVisible = true;
                })
            },

            // 查看新闻内容
            see(id){
                $.get("/ssm/agree/get/" +id,function (backDate) {
                    haha.cInfo = backDate.data;
                    haha.dialogVisible = true;
                })
            },

            // 上架
            upper(id){
                $.get("/ssm/state/upper/" + id,function (backDate) {
                    getData(1,10);
                })
            },

            // 下架
            lower(id){
                $.get("/ssm/state/lower/" + id,function (backDate) {
                    getData(1,10);
                })
            },


            search(){
                getData(1,10);
            },
            handleCurrentChange(val){
                getData(val,10);
            }
        }
    });

    function getData(a,b){
        haha.Info.pageNo= a;
        haha.Info.pageCount=b;
        $.post("/ssm/state/query",haha.Info,function(backData){
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        })
    }
    getData(1,10);
</script>
</body>
</html>